<template>
  <div class="app-container">
    <div>
      <el-button type="info" style="margin-left:65%" @click="back">返回</el-button>
      <el-button v-print="'#print'" type="warning">打印当前</el-button>
      <el-button type="success" @click="print">前往打印</el-button>
      <div id="print">
        <div class="name">
          <h1>{{ name2 }} </h1>
          <h1>生产制造单</h1>
        </div>
        <div class="dh">
          <div>
            <p>客户:{{ tableData.name }}  </p>
            <p>客户单号:{{ tableData.customerNo }}</p>
          </div>
          <div style="padding-top: 50px;">
            交货时间:{{ tableData.deliveryDate }}
          </div>
        </div>
        <div style="width:800px;margin:0 auto">
          <table>
            <tr>
              <td colspan="2">产品编码</td>
              <td colspan="2">{{ tableData.no }}</td>
              <td>款号</td>
              <td colspan="3">{{ tableData.modelNo }}</td>
            </tr>
            <tr>
              <td colspan="2">产品规格</td>
              <td colspan="2">{{ tableData.length +" X "+ tableData.width +" X "+ tableData.height }}</td>
              <td>订单数量</td>
              <td>{{ tableData.orderNum }}</td>
              <td>拼数</td>
              <td>{{ tableData.doubleKill ?tableData.orderNum * 2 : tableData.orderNum }}</td>
            </tr>
            <tr>
              <td colspan="2">面纸材质</td>
              <td colspan="2">印刷规格</td>
              <td>正数</td>
              <td>放数</td>
              <td>面纸总数</td>
              <td>面纸来源</td>
            </tr>
            <tr>
              <td colspan="2">{{ tableData.colorOutMaterial }}</td>
              <td colspan="2">{{ tableData.outPaperLength +" X "+tableData.outPaperWidth }}</td>
              <td />
              <td />
              <td />
              <td>{{ tableData.outsuppier }}</td>
            </tr>
            <tr>
              <td colspan="2">瓦纸材质</td>
              <td colspan="2">裱纸规格</td>
              <td>正数</td>
              <td>放数</td>
              <td>瓦纸总数</td>
              <td>瓦纸愣型</td>
            </tr>
            <tr>
              <td colspan="2">{{ tableData.colorInMaterial }}</td>
              <td colspan="2">{{ tableData.inPaperLength +" X "+tableData.inPaperWidth }}</td>
              <td />
              <td />
              <td />
              <td>{{ tableData.stare }}</td>
            </tr>
            <tr>
              <td>CTP号</td>
              <td colspan="3">{{ tableData.ctp }}</td>
              <td colspan="4" rowspan="5"> <img v-if="tableData.img" :src="url" class="avatar" style="width:100%;height:200px;"></td>
            </tr>
            <tr>
              <td>刀版</td>
              <td>{{ tableData.knife }}</td>
              <td>表面处理</td>
              <td>{{ tableData.surface }}</td>
            </tr>
            <tr>
              <td>颜色</td>
              <td>{{ tableData.color }}</td>
              <td>专色</td>
              <td />
            </tr>
            <tr>
              <td>印刷要求</td>
              <td colspan="3" />
            </tr>
            <tr>
              <td>备注</td>
              <td colspan="3" />
            </tr>
            <tr>
              <td>工序流程</td>
              <td>合格数量</td>
              <td>耗损数量</td>
              <td colspan="2">生产(入库)时间</td>
              <td colspan="2">生产及检验人员签名</td>
              <td>备注</td>
            </tr>
            <tr v-for="item in tableData.process" :key="item.id">
              <td>{{ item }}</td>
              <td />
              <td />
              <td colspan="2">&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;时 </td>
              <td colspan="2" />
              <td />
            </tr>
          </table>
        </div>
        <div class="footer">
          <p>制单:{{ created }}</p>
          <p>复核：{{ tableData.auditBy }}</p>
          <p>制单日期：{{ tableData.orderDate }}</p>
          <p>交货日期：{{ tableData.deliveryDate }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUser, getUserById } from '@/api/order/customerOrder'
import { list } from '@/api/basedata/firm'
export default {
  name: 'TagMethods',
  inject: ['closeTag', 'reloadTag', 'refreshTag'],
  data() {
    return {
      url: '',
      tableData: {},
      row: {},
      name: '',
      created: '',
      aa: null,
      name2: ''
    }
  },
  created() {
    list().then(res => {
      console.log(res)
      var firmList = []
      firmList = res.list
      firmList.forEach(a => {
        if (a.isFirm === true) {
          this.name2 = a.name
          console.log('name:' + this.name2)
        }
      })
    })
    getUser().then(res => {
      this.name = res.nickname
    })
    var row = this.$route.query.row
    this.row = row
    this.tableData = row
    console.log('tabledata', this.tableData)
    this.url = this.baseURL + row.img
    getUserById(row.createdBy).then(res => {
      this.created = res.nickname
    })
  },
  methods: {
    back() {
      this.$router.push('/edit')
    },
    changeText() {
      this.reloadTag()
    },
    print() {
      this.$router.push({
        path: '/index2',
        query: { row: this.row }
      })
    }
  }

}
</script>

<style scoped>
/* #print{
  border: 1px solid black;
  padding: 50px 0;
  width: 100%;
  margin: 0 auto;
} */
.dh{
  display: flex;
  justify-content: space-between;
  width: 800px;
  padding: 0 10px;
  margin: 0 auto;
}
table,tr,td{
  border:1px solid black;
}
table{
  width:800px;
  border-collapse:collapse;
  height: auto;
  margin: 0 auto;
  margin-right: 250px;
}
tr{
  height: 35px;
}
table td{
  height: 35px;
}
td{
  width: 150px;
  text-align: center ;
  padding-left:15px;
  line-height: 35px;
}
.center{
  text-align: center;
}
.footer{
  display: flex;
  width: 800px;
  padding-left: 5px;
  margin: 0 auto;
}
.footer>p:nth-of-type(2){
  margin-left: 80px;
}
.footer>p:nth-of-type(3){
  margin-left: 90px;
}
.footer>p:nth-of-type(4){
  margin-left: 150px;
}
.xx{
  position: relative;
}
.xx span{
  position: absolute;
  top: 0;
  left: 0;
}
.xx_img{
  display: block;
  margin-left: 8%;
}
.name{
  width: 100%;
  margin: 0 auto;
  text-align:center;
  margin-top: -20px;
}
.remarks{
  padding-left: 50px;
}
</style>
<style media="print">
  body {
    border: solid 1px #ffffff;
    margin:0;
  }
</style>
